<template>
    <el-table :data="tableData" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="code" label="资金账户编号" width="150">
            <template scope="scope">
                <el-popover trigger="click" placement="right" @show="assetsDetail(scope.row.code)" width="500"
                            title="资产详情">
                    <el-table :data="assets" border stripe>
                        <el-table-column prop="type" label="币种" fixed></el-table-column>
                        <el-table-column v-for="(v, k, index) in tags" :label="v" width="120" :key="k">
                            <template scope="scope">{{scope.row['_' + index]}}</template>
                        </el-table-column>
                    </el-table>
                    <div slot="reference">
                        <el-tag>{{ scope.row.code }}</el-tag>
                    </div>
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column prop="currency" label="结算货币"></el-table-column>
        <el-table-column prop="enabled" label="状态" sortable>
            <template scope="scope">{{scope.row.enabled | dict('ENABLED', $store.state.dict.list)}}</template>
        </el-table-column>
        <el-table-column label="操作">
            <template scope="scope">
                <el-button type="text" size="small" @click="customers(scope.row)">客户列表</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>
<script>
    import axios from '~plugins/axios';

    export default {
        data() {
            return {
                tags: {},
                assets: [],
                tableData: []
            };
        },
        mounted() {
            this.queryBase();
            this.tagList();
        },
        methods: {
            queryBase() {
                axios.get(`/api/assets/account/list/${this.$route.query.code}`).then(res => {
                    this.tableData = res.data;
                });
            },
            assetsDetail(code) {
                this.assets = [];
                axios.get(`/api/assets/detail/account/${code}`).then(res => {
                    let assetsObj = {};
                    for (let t in res.data.tag) {
                        let temp = t.split('_');
                        if (!assetsObj.hasOwnProperty(temp[0])) {
                            assetsObj[temp[0]] = {};
                        }
                        assetsObj[temp[0]]['_'.concat(temp[1])] = res.data.tag[t];
                    }
                    for (let t in assetsObj) {
                        this.assets.push(Object.assign({type: t}, assetsObj[t]));
                    }
                });
            },
            customers(row) {
                this.$router.push({path: '/user/allocation/customers', query: {id: row.id}});
            },
            tagList() {
                axios.get(`/api/assets/tag/list`).then(res => {
                    let obj = {};
                    res.data.forEach(val => {
                        obj[val['code']] = val['name'];
                    });
                    this.tags = obj;
                });
            }
        }
    };
</script>